<!-- <link rel="stylesheet" href="smarttaxi_themes.css" />	 -->

<div data-role="page">
	<div data-role="header">
		<a href="driver-chart.html" data-type="button"
					data-icon="bars" data-iconpos="notext" data-position-to="right ">Menu</a>
		<h1>Smart Taxi</h1>
	</div>
	
	<div data-role="content">
		
		<!-- <div class="driverCheckbox"  data-role="fieldcontain">
				
				<select name="voiceStatus" id="voiceStatus" data-role="slider" >
					<option value="available" selected="selected">available</option>
					<option value="silent" >silent</option>
				</select>
		</div> -->
		
		<div align = "center" class="registerRadios">
		
			<fieldset data-role="controlgroup" data-type = "horizontal" data-mini="true">
		    	<input type="radio"  name="driverCheckbox" id="availableCheckbox"  value = "availableCheckbox" checked = "checked"/>
				<label for="availableCheckbox">Available</label>
				<input type="radio"  name="driverCheckbox" id="silentCheckbox" value ="silentCheckbox"/>
				<label for="silentCheckbox">Silent</label>
			</fieldset>
			</div>	
		<!-- <div class="driverCheckbox"  align = "center" >
			
				<fieldset data-role="controlgroup" data-type="horizontal">				
					<input type="radio" data-theme="a" value="d" name="checkbox1" id="availableCheckbox" checked="checked" />
					<label for="availableCheckbox">Available</label> 
					<input type="radio" data-theme="a" value="s" name="checkbox2" id="silentCheckbox"  />
					<label  for="silentCheckbox">Silent</label>
				</fieldset>
			
		</div>  -->
		<div id="driverCurOrders">
			<div id="cus_Info" class="cus_info">
				<div style="float: left" class="cus_photo">
					<img id="cusphoto" src="../images/defaultPhoto.png" width="40px"
						height="50px" />
				</div>
				<div style="float: left">
					<table>
						<tr>
							<td class="col1">Name: <span id="cus_name">Samu Lu</span>
						</tr>
						<tr>
							<td class="col1">Credit: <span id="cus_credit"><img
									src='../images/star.png' width='14px' height='14px'></span></td>
						</tr>
						<tr>
							<td class="col1">Location: <span id="cus_location">Shanghai</span></td>
						</tr>
					</table>
				</div>
				<div style="float: right" id = 'microDiv'>
					<a><img src="../images/mic_w.ico" height="50px" width="50px"
						id="microphoto" data-state="stop" /></a>
				</div>
				<p style="clear: both;"></p>
			</div>
			<!-- end cusInfo -->
			
			<!--  <p id="noOrderText">Sorry, you have no pending orders right now</p>-->
			<div id = "newOrder">
			</div>
		</div>
		<div id="voicecontainerD" class="hidden" align = "center">
		<a data-role="button" id="moreBtn">
				<span class="ui-btn-text">More</span>
		</a>
		<div id="recordHistory">
		</div>
		<a data-role="button" data-status="stop" id="voiceBtn">
			<span class="ui-btn-text">Voice</span>
		</a>
		</div>
		<div id="weathercontainer" class="weather">
			<div class="wea" id="place">
				<span class="place">Shang Hai</span>
			</div>
			<div class="wea">
				<table>
					<tr>
						<td><img src="../images/sun.png" height="40px" width="40px"></img></td>
						<td><span>27~31</span></td>
					</tr>
					<tr>
						<td></td>
						<td><span id="weastatus" class="weastatus1">sunshine</span><br>
							<span class="weastatus2">humidity : </span><span id="humidity"
							class="weastatus2">67%</span><br> <span class="weastatus2">wind
								speed : </span><span class="weastatus2">21km/h</span></td>
					</tr>
				</table>
			</div>
			<div class="wea">
				<table>
					<tr>
						<td><span class="week">Mon</span></td>
						<td><span class="week">Tus</span></td>
						<td><span class="week">Wen</span></td>
						<td><span class="week">Thu</span></td>
						<td><span class="week">Fri</span></td>
						<td><span class="week">Sat</span></td>
					</tr>
					<tr>
						<td><img src="../images/sun.png" height="25px" width="25px"></img></td>
						<td><img src="../images/sun.png" height="25px" width="25px"></img></td>
						<td><img src="../images/rain.png" height="25px" width="25px"></img></td>
						<td><img src="../images/sun.png" height="25px" width="25px"></img></td>
						<td><img src="../images/rain.png" height="25px" width="25px"></img></td>
						<td><img src="../images/rain.png" height="25px" width="25px"></img></td>
					</tr>
					<tr>
						<td><span class="degree">36</span></td>
						<td><span class="degree">32</span></td>
						<td><span class="degree">28</span></td>
						<td><span class="degree">30</span></td>
						<td><span class="degree">33</span></td>
						<td><span class="degree">30</span></td>
					</tr>
					<tr>
						<td><span class="degree">27</span></td>
						<td><span class="degree">26</span></td>
						<td><span class="degree">25</span></td>
						<td><span class="degree">27</span></td>
						<td><span class="degree">28</span></td>
						<td><span class="degree">24</span></td>
					</tr>
				</table>
			</div>
		</div>
		<div data-role="navbar">
				<ul>
					<li> <a href="#" id="histOrderBtn" >Orders</a></li>
					<li> <a href="#" id="desperateBtn" >Pending</a></li>
					<li> <a href="#" id="roadcdtBtn">more</a></li>
				</ul>
			</div>
	<!-- 	<a data-role="button" id="histOrderBtn" class="mainBtn" data-inline="true">Historical Orders</a>
		<a data-role="button" id="desperateBtn" class="mainBtn" data-inline="true">Find Customers</a>
	 -->
	 <div data-role="popup" id="driorderPopup"  data-overlay-theme="a" data-theme="c" data-position-to="window" style="width:250px">
		<div data-role="header"><h1>Order</h1></div>
		<div data-role="content">
					<div>
					<table>
						<tr>
							<td><h3 id="namePopup"></h3></td>
						</tr>
						<tr>
							<td>Credit: <span id="creditPopup"></span>
						</tr>
					</table>
					</div>
					<hr>
					<div>
					<table>
						<tr>
							<td>Time: <span id="timePopup"></span></td>
						</tr>
						<tr>
							<td>From: <span id="fromAddrPopup"></span></td>
						</tr>
						<tr>
							<td>To: <span id="toAddrPopup"></span></td>
						</tr>
					</table>
					</div>
				<hr>
					<div>
					<a data-role="button"  id="driAcceptBtn">
						<span >accept</span>
					</a>
					</div>
					
			</div>
	</div>
	
	</div>
	<script src="../js/driver-main.js"></script> 
</div>